<template>
  <div :id="elId" style="width: 100%; height: 400px"></div>
</template>

<script>
import * as echarts from "echarts";
//引入uuid文件
import uuidv1 from "uuid/v1";
export default {
  name: "LineCharts",
  data() {
    return {
      elId: "",
    };
  },
  props: {
    // 标题
    title: {
      type: String,
      default: "",
    },
    // 横轴
    xAxisData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 纵轴单位
    yAxisUnit: {
      type: String,
      default: "",
    },
    visualMap: {
      type: Object,
      default: () => {
        return {};
      },
    },
    // 顶部图例
    legend: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 默认展示的图例，空数组=全部展示
    showLegendArr: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 数据源
    seriesData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 添加线
    addLine: {
      type: Boolean,
      default: false,
    },
    // 线样式
    lineStyle: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 添加区域
    addArea: {
      type: Boolean,
      default: false,
    },
    // 区域样式、范围
    areaStyle: {
      type: Object,
      default: () => {
        return {
          color: "#F2F2F2",
          data: [4.4, 10], // 范围值
        };
      },
    },
  },
  computed: {
    formatLegend() {
      if (this.legend) {
        let legendSelect = {};
        if (this.showLegendArr && this.showLegendArr.length === 0) {
          this.legend.forEach((el) => {
            legendSelect[el] = true;
          });
        } else if (this.showLegendArr && this.showLegendArr.length > 0) {
          this.legend.forEach((el, index) => {
            if (this.showLegendArr.includes(index)) {
              legendSelect[el] = true;
            } else {
              legendSelect[el] = false;
            }
          });
        }
        return {
          data: this.legend,
          selected: legendSelect,
          width: '40%', //这个重点
          selector: ['all', 'inverse'] //全选和反选按钮
        };
      } else {
        return { data: this.legend };
      }
    },
    formatSeriesData() {
      if (this.legend) {
        let seriesData = [];
        this.legend.forEach((el, index) => {
          let data = {
            connectNulls: true,
            type: "line",
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
          };

          data.name = el;
          data.data = this.seriesData[index];

          if (this.addArea) {
            let markArea = this.makeMarkArea();
            data.markArea = markArea;
          }

          if (this.addLine) {
            let markLine = this.makeMarkLine(index);
            data.markLine = markLine;
          }

          seriesData.push(data);
        });
        return seriesData;
      } else {
        return [];
      }
    },
  },
  created() {
    this.elId = uuidv1(); //获取随机id
  },
  mounted() {
    var myChart = echarts.init(document.getElementById(this.elId));
    // 绘制图表
    const options = {
      title: {
        text: this.title,
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "line",
          lineStyle: {
            color: "rgba(255,255,255,0)",
          },
        },
      },
      grid: {
        left: "15%",
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: this.xAxisData,
        position: "bottom",
      },
      yAxis: [
        {
          type: "value",
          boundaryGap: [0, "50%"],
          axisLabel: {
            formatter: "{value}" + this.yAxisUnit,
          },
        },
      ],
      calculable: true,
      legend: this.formatLegend,
      series: this.formatSeriesData,
    };

    let chartsOptions = options;
    if (JSON.stringify(this.visualMap) != "{}")
      chartsOptions = Object.assign(options, { visualMap: this.visualMap });

    myChart.setOption(chartsOptions);
  },
  methods: {
    makeMarkArea() {
      let markArea = {
        silent: true,
        itemStyle: {
          color: this.areaStyle.color,
        },
      };
      let markAreaData = [];
      this.areaStyle.data.forEach((el) => {
        markAreaData.push({ yAxis: el });
      });
      markArea = Object.assign(markArea, { data: [markAreaData] });
      return markArea;
    },
    makeMarkLine(index) {
      const dataIndex = this.lineStyle.findIndex((item) => {
        return item.index === index;
      });
      if (dataIndex < 0) {
        return {};
      } else {
        let markLine = {
          silent: false, //鼠标悬停事件
          symbol: "none",
          lineStyle: {
            color: this.lineStyle[dataIndex].lineColor,
          },
          label: {
            textStyle: {
              color: this.lineStyle[dataIndex].textColor,
            },
          },
        };
        let markLineData = [];
        this.lineStyle[dataIndex].data.forEach((el) => {
          markLineData.push({ yAxis: el });
        });
        markLine = Object.assign(markLine, { data: markLineData });
        return markLine;
      }
    },
  },
};
</script>